<template>
  <div class="order">
    <div style="height: 0;flex-grow: 1;overflow-y: scroll">

      <div class="carLogo" v-show="false">
        <i class="iconfont icon-benchi"></i>
      </div>

      <!--取车方式-->
      <div class="infotitle">接机/送机</div>
      <div class="getcar">
        <md-check-box
          v-model="gettype"
          :options="options"
        >
          <div slot="content" slot-scope="{ option }" class="payment-gateway">

            <div class="clearfix">

              <span style="font-size: 14px;"  v-text="option.label"></span>
            </div>
            <div v-text="option.desc" style="font-size: 12px;color:#666">

            </div>
          </div>
        </md-check-box>
      </div>

      <div class="infotitle">用车时间 (专线服务时间：5:30至20:00) </div>
      <div class="cdate" style="padding:0 40px">
        <div class="sdate" @click="showsdate"  v-if="gettype>=1">
          <div> {{ sdate | moment('YYYY/MM/DD HH:mm') }}</div>
        </div>
      </div>

      <div class="infotitle">联系人信息</div>
      <div class="flightbox" style="margin-bottom: 15px;">
        <md-field>
          <md-input-item
            ref="lxname"
            title="联系人"
            placeholder="输入联系人姓名"
            is-title-latent
            clearable
            v-model="lxname"
          ></md-input-item>
          <md-input-item
            ref="lxphone"
            title="联系电话"
            type="phone"
            placeholder="输入联系人电话"
            is-title-latent
            clearable
            v-model="lxphone"
          ></md-input-item>
        </md-field>
      </div>
      <!--选择位置-->

        <div class="infotitle"> 选座 </div>
        <div class="flightbox">

          <div class="catitle"> 常规班次 </div>
          <div class="carmap" >
            <div id="site6" @click="chooseSit(6,$event)"></div>
            <div id="site5"  @click="chooseSit(5,$event)"></div>
            <div   style="visibility: hidden"></div>
            <div  id="site4"  @click="chooseSit(4,$event)"></div>
            <div style="visibility: hidden"></div>
            <div  style="visibility: hidden"></div>
            <div  id="site3"   @click="chooseSit(3,$event)">  </div>
            <div  id="site2"  @click="chooseSit(2,$event)"></div>
            <div  id="site1" @click="chooseSit(1,$event)"></div>
          </div>

          <template v-for="(item,index) of line">
            <div class="catitle"> 增班班次{{index}} </div>
            <div class="carmap" >
              <div :id="`site${index}`+6" @click="chooseSit(index+'6',$event)"></div>
              <div :id="`site${index}`+5"  @click="chooseSit(index+'5',$event)"></div>
              <div   style="visibility: hidden"></div>
              <div  :id="`site${index}`+4"  @click="chooseSit(index+'4',$event)"></div>
              <div style="visibility: hidden"></div>
              <div  style="visibility: hidden"></div>
              <div  :id="`site${index}`+3"   @click="chooseSit(index+'3',$event)">  </div>
              <div  :id="`site${index}`+2"  @click="chooseSit(index+'2',$event)"></div>
              <div  :id="`site${index}`+1" @click="chooseSit(index+'1',$event)"></div>
            </div>
          </template>
        </div>

        <div class="infotitle" style="margin-top: 15px;"> {{gettype==2?'上车地点':'下车地点'}} </div>
        <md-field>
          <md-field-item
            name="name"
            :title="gettype==2?'选择上车地点':'选择下车地点'"
            arrow="arrow-right"
            align="right"
            :value="saddress"
            @click.native="showSelector"
          >
          </md-field-item>
        </md-field>

      <md-selector
        v-model="isSelectorShow"
        :data="addressData"
        :default-index="1"
        title="点击选择地址"
        @choose="onSelectorChoose($event)"
      ></md-selector>
      <div
        class="carbox"
        v-if="carinfo.name"
        :style="`background: url(${imgs[0].url}) center center;position:relative `"
      ></div>

      <!--基本参数-->
      <div class="infotitle" v-if="carinfo.name">车辆信息</div>

      <div class="info" v-if="carinfo.name">

        <div class="arg">
          <div>
            <span class="argtitle">座位</span>
            <span class="arginfo">{{carinfo.sits}}座</span>
          </div>
          <div>
            <span class="argtitle">车辆类型</span>
            <span class="arginfo">{{carinfo.cartype}}</span>
          </div>
          <div>
            <span class="argtitle">动力/排量</span>
            <span class="arginfo">{{carinfo.pl}}</span>
          </div>
        </div>
      </div>

      <!-- 车辆费用说明 -->
      <div class="infotitle" v-if="carinfo.name">
        <template v-if="gettype===0"> 接机 </template>
        <template v-if="gettype===1"> 送机 </template>
        费用说明
      </div>
      <div class="pricebox" v-if="carinfo.name">

        <template v-if="gettype===0">
          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 7:00 - 23:00</span>
              <span class="pright" style="float:right"> {{carinfo.jie_day_fee}}元</span>
            </div>
          </div>

          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 23:00 - 7:00</span>
              <span class="pright" style="float:right"> {{carinfo.jie_night_fee}}元</span>
            </div>
          </div>
        </template>
        <template v-if="gettype===1">
          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 7:00 - 23:00</span>
              <span class="pright" style="float:right"> {{carinfo.song_day_fee}}元</span>
            </div>
          </div>

          <div class="priceitem">
            <div class="l1 clearfix">
              <span class="pleft" style="float:left"> 23:00 - 7:00</span>
              <span class="pright" style="float:right"> {{carinfo.song_night_fee}}元</span>
            </div>
          </div>
        </template>

      </div>

      <!-- 车辆介绍 -->
      <div class="infotitle" v-if="carinfo.name">车辆介绍</div>
      <div class="carinfo" v-if="carinfo.name">
        {{carinfo.desc}}
      </div>
      <!-- 联系客服 -->
      <div class="infotitle">联系客服</div>

      <div class="custom"> 18174123678 </div>

    </div>
    <div class="checkout" @click="topay" >
      立即预约
      <template v-if="total_fee>0">{{total_fee}} 元</template>
    </div>

    <md-date-picker
      v-model="sDatePickerShow"
      ref="sdatepicker"
      type="custom"
      today-text="今天"
      title="选择取车时间"
      :default-date="currentDate1"
      :custom-types="[ 'MM','dd', 'hh', 'mm']"
      :minute-step="30"
      @confirm="onDatePickerConfirms"
    ></md-date-picker>

 <!--   <datetime-picker
      v-model="currentDate1"
      type="datetime"
      @confirm="onDatePickerConfirms"
      @cancel="sDatePickerShow=false"
      v-show="sDatePickerShow"
      :min-date="minDate"
      :min-hour="5"
      :max-hour="20"
    ></datetime-picker>-->

  </div>
</template>

<script>
import { Toast } from 'mand-mobile'
import Carlist from '@/components/carlist.vue'
import DatetimePicker from 'vant/lib/datetime-picker'
import 'vant/lib/datetime-picker/style'
import npbg from '@/assets/nplace.jpg'
export default {
  name: 'fight',
  components: {
    Carlist,
    'DatetimePicker': DatetimePicker
  },
  data () {
    return {
      isSelectorShow: false,
      showmap: false,
      minDate: '',
      currentDate1: new Date(),
      currentDate2: new Date(),
      sDatePickerShow: false,
      eDatePickerShow: false,
      sdate: new Date(),
      edate: new Date(),
      lxname: '',
      lxphone: '',
      countDatestr: ` <span style="display:block;font-size: 20px;margin-top: 30px;">请选择</span>`,
      addressData: [
        {text: '金旺角国际大酒店'},
        {text: '南宁鑫伟万豪酒店'},
        {text: '红林大酒店'},
        {text: '迪拜七星酒店'},
        {text: '会展豪生大酒店'},
        {text: '南宁名都大酒店'}
      ],
      addressData1: [
        {text: '江南客运站'},
        {text: '东盟商务区'},
        {text: '金旺角国际大酒店'},
        {text: '火车东站'}
      ],
      carinfo: {
        dayfee: {
          fee: 0.00,
          driver_fee: 0.00
        },
        fourfee: {
          fee: 0.00,
          driver_fee: 0.00
        },
        eightfee: {
          fee: 0.00,
          driver_fee: 0.00
        }

      },
      gettype: 2,
      need_driver: 1,
      counttype: 'day',
      total: 0,
      imgs: [
        './c1.jpg',
        './c2.jpg'
      ],
      options: [
        {value: 2, label: '专车送机', desc: '便捷达到机场'},
        {value: 3, label: '专车接机', desc: '便捷到达市区'}
      ],
      options2: [
        {value: 1, label: '需要代驾', desc: '根据您的用车时间收费'},
        {value: 0, label: '自驾', desc: '需缴纳一定的保证金'}
      ],
      options3: [
        {value: '4hour', label: '4小时', desc: '199元'},
        {value: '8hour', label: '8小时', desc: '299元'},
        {value: 'day', label: '按天', desc: '300元'}
      ],
      mapres: [],
      saddress: '',
      carlist: false,
      stimg: {},
      flightnum: '',
      total_fee: 0.00,
      nowsit: '',
      zxcar: {
        car: {
          cartype: '商务车',
          cid: 19,
          desc: '作为大型豪华MPV的领军车型，拥有尊贵的外观、豪华舒适的空间、一流的安全设计、强劲动力和宁静顺畅的驾乘感受',
          despoil: '5000.00',
          imgs: `[{"name":"封面.jpeg","url":"http://lending2.oss-cn-shenzhen.aliyuncs.com/tmc/1535252602.jpeg","uid":1535252602765,"status":"success"},{"name":"侧面.jpeg","url":"http://lending2.oss-cn-shenzhen.aliyuncs.com/tmc/1535252610.jpeg","uid":1535252609991,"status":"success"},{"name":"正驾台.jpeg","url":"http://lending2.oss-cn-shenzhen.aliyuncs.com/tmc/1535252615.jpeg","uid":1535252615317,"status":"success"},{"name":"中排.jpeg","url":"http://lending2.oss-cn-shenzhen.aliyuncs.com/tmc/1535252622.jpeg","uid":1535252621869,"status":"success"},{"name":"后排.jpeg","url":"http://lending2.oss-cn-shenzhen.aliyuncs.com/tmc/1535252629.jpeg"}]`,
          jie_day_fee: '330.00',
          jie_night_fee: '400.00',
          name: '新别克GL8',
          need_driver: 0,
          order: 0,
          pl: '2.0T',
          sits: 7,
          song_day_fee: '280.00',
          song_night_fee: '350.00',
          type: 3
        }
      },
      line: []

    }
  },
  created: function () {
    let nd = new Date().getMinutes()
    let _d = new Date()
    this.minDate = _d
    this.currentDate1 = _d
    if (_d.getHours() >= 21) {
      this.currentDate1.setDate(this.currentDate1.getDate() + 1)
      this.currentDate1.setHours(5)
      this.currentDate1.setMinutes(30)
    }

    if (60 - nd < 35) {
      this.currentDate1.setHours(this.currentDate1.getHours() + 1)
      this.currentDate1.setMinutes(0)
      this.sdate = this.currentDate1
    } else {
      this.currentDate1.setMinutes(30)
      this.sdate = this.currentDate1
    }
  },
  mounted: async function () {
    // this.getcarinfo()
    this.getcarinfo(this.zxcar)
  },
  watch: {
    gettype: function (nv) {
      console.log(nv)
      this.$store.commit('updateFlight', {type: this.gettype})

      if (nv == 2) {
        this.addressData = [
          {text: '金旺角国际大酒店'},
          {text: '南宁鑫伟万豪酒店'},
          {text: '红林大酒店'},
          {text: '迪拜七星酒店'},
          {text: '会展豪生大酒店'},
          {text: '南宁名都大酒店'}
        ]
      } else if (nv == 3) {
        this.addressData = [
          {text: '江南客运站'},
          {text: '东盟商务区'},
          {text: '金旺角国际大酒店'},
          {text: '火车东站'}
        ]
      }
      let _d = new Date()
      const _dHour = _d.getHours()
      if (_dHour >= 20) {
        _d.setDate(_d.getDate() + 1)
        _d.setHours(12)
        _d.setMinutes(0)
      }
      if (_dHour == 5) {
        _d.setMinutes(30)
      }
      this.sdate = _d
      this.$store.commit('updateFlight', {cid: 19})
      this.getcarinfo(this.zxcar)
      this.total_fee = 60
      this.getsitinfo()
    },
    sdate: function () {
      this.$store.commit('updateFlight', {stime: this.sdate.getTime()})
      this.updateFee()
    },
    flightnum: function () {
      this.$store.commit('updateFlight', {flightnum: this.flightnum})
    },
    carinfo: function () {
      this.updateFee()
    }
  },
  methods: {
    showSelector () {
      this.isSelectorShow = true
    },
    onSelectorChoose ({text}) {
      this.saddress = text
    },
    chooseSit: async function (index, ev) {
      if (ev.target.classList.contains('hasone')) {
        Toast.info('请选择其他座位')
        return
      }

      if (ev.target.classList.contains('ci')) {
        ev.target.classList.remove('ci')
        let _d = this.nowsit.split(',')
        let _nd = _d.filter((v) => {
          return v != index
        })
        this.nowsit = _nd.join(',')
      } else {
        ev.target.classList.add('ci')
        let _d = this.nowsit.split(',')[0] ? this.nowsit.split(',') : []
        _d.push(index)
        this.nowsit = _d.join(',')
      }
      console.log(this.nowsit)
      this.updateFee()
    },
    getcarinfo: async function (item) {
      let _car = item.car
      if (_car.imgs) {
        this.imgs = JSON.parse(_car.imgs)
      }
      if (_car.type === 1) {
        _car.cartype = '小轿车'
      } else if (_car.type === 2) {
        _car.cartype = '越野车'
      } else if (_car.type === 3) {
        _car.cartype = '商务车'
      }

      this.carinfo = _car
      this.carinfo.jie_day_fee = item.jie_day_fee
      this.carinfo.jie_night_fee = item.jie_night_fee
      this.carinfo.song_day_fee = item.song_day_fee
      this.carinfo.song_night_fee = item.song_night_fee
      this.carlist = false
      this.stimg = { background: `${this.imgs[0].url} ` + `center center` }
    },
    topay: async function () {
      if (!this.saddress) {
        Toast.failed('请选择乘车地点')
        return false
      }

      if (!this.lxname) {
        Toast.failed('请填写乘车姓名')
        return false
      }
      if (!this.lxphone) {
        Toast.failed('请填写联系电话')
        return false
      }
      if (!this.nowsit) {
        Toast.failed('请选择你要乘坐的位置')
        return false
      }

      // 重置秒数
      this.sdate.setSeconds(0)
      let res = await this.$api.post('/addFlightOrder', {
        s_date: parseInt(this.sdate.getTime() / 1000) * 1000,
        uid: this.$store.state.wxuser.uid,
        fee: this.total_fee,
        address: this.saddress,
        type: this.gettype == 2 ? 7 : 6,
        lxname: this.lxname,
        phone: this.lxphone,
        cid: this.carinfo.cid,
        flightnum: this.flightnum,
        nowsit: this.nowsit
      })

      console.log(res)
      if (res.data.state) {
        Toast.succeed('添加成功')
        let _payparams = await this.$api.post('/prepay', {
          oid: res.data.data.oid,
          total_fee: parseFloat(this.total_fee * 100),
          // total_fee: 1,
          desc: this.$store.state.wxuser.nickname + '的' + this.carinfo.name + '租车订单',
          openid: this.$store.state.wxuser.openid
        })

        if (_payparams.data.state) {
          const _this = this
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', _payparams.data.data,
            function (res) {
              if (res.err_msg === 'get_brand_wcpay_request:ok') {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                Toast.succeed('支付成功')
                setTimeout(() => {
                  _this.$router.replace({name: 'OrderList'})
                }, 2000)
              }
            })
        }
      } else {
        Toast.failed(res.data.info)
      }
    },
    onDatePickerConfirms: async function (columnsValue) {
      let _d = new Date()
      _d.setMonth(columnsValue[0].value - 1)
      _d.setDate(columnsValue[1].value)

      if (columnsValue[2].value < 5) {
        _d.setHours(5)
        columnsValue[3].value < 30 ? _d.setMinutes(30) : _d.setMinutes(columnsValue[3].value)
      } else if (columnsValue[2].value >= 20) {
        _d.setHours(20)
        columnsValue[3].value >= 30 ? _d.setMinutes(0) : _d.setMinutes(columnsValue[3].value)
      } else {
        _d.setHours(columnsValue[2].value)
        _d.setMinutes(columnsValue[3].value)
      }

      this.sdate = _d
      this.getsitinfo()
    },
    getsitinfo: async function () {
      for (const v of document.querySelectorAll('.hasone')) {
        v.classList.remove('hasone')
      }
      for (const v of document.querySelectorAll('.ci')) {
        v.classList.remove('ci')
      }
      this.nowsit = ''
      let _d = new Date(this.sdate.getTime())
      _d.setSeconds(0)

      let res = await this.$api.post('/wx/getsitinfo', {sdate: parseInt(_d.getTime() / 1000) * 1000})
      if (res.data.state) {
        this.line = res.data.line

        this.$nextTick(function () {
          // DOM 现在更新了
          // `this` 绑定到当前实例
          for (const v of res.data.data) {
            console.log(v)
            console.log(document.getElementById('site' + v))
            document.getElementById('site' + v).classList.add('hasone')
          }
        })

        if (res.data.data.length >= 6 * (this.line.length + 1)) {
          Toast.failed('当前时间已经没有座位了，请选择其他时间点')
          return false
        }
      } else {
        Toast.failed('获取位置失败')
        setTimeout(() => this.getsitinfo(), 3000)
      }
    },
    showsdate: async function () {
      this.sDatePickerShow = true
    },
    showedate: async function () {
      this.eDatePickerShow = true
    },
    countDate: function () {
      let _d = parseInt((this.edate - this.sdate) / 1000)
      let _day = parseInt(_d / (24 * 60 * 60))
      let _hour = parseInt((_d % (24 * 60 * 60)) / (60 * 60))

      this.countDatestr = `<span style="display:block;font-size: 20px;margin-top: 30px;">${_day}天</span>`

      if (_hour > 0) {
        this.countDatestr += `<span>${_hour}个小时</span>`
      }

      this.$store.commit('updateOrder', {sdate: this.sdate, edate: this.edate})
    },
    getMap: function () {
      this.showmap = true
    },
    searchMap: async function (ev) {
      console.log(ev.target.value)
      let _res = await this.$api.get('https://restapi.amap.com/v3/place/text', {params: {
        key: 'e2c4f60587c2581f55c985731bb98992',
        keywords: ev.target.value,
        city: '南宁',
        citylimit: true,
        extensions: 'all'
      }})

      if (_res.data.status) {
        this.mapres = _res.data.pois
      }
    },
    updateAddress: async function (pos) {
      this.saddress = pos.name
      this.showmap = false
    },
    showcarlist: function () {
      this.carlist = true
    },
    updateFee () {
      // 计算选了多少个座位
      let all = document.querySelectorAll('.ci')
      let baseFee = 60

      let m = this.sdate.getHours()
      let h = this.sdate.getMinutes()
      if (m < 7) {
        baseFee = 80
      }

      if (m === 7 && h === 0) {
        baseFee = 80
      }
      this.total_fee = baseFee * all.length
    }
  }
}
</script>

<style scoped>

  .catitle{
    line-height: 2;
    font-size: 12px;
    margin-top:10px;
  }
  .order{
    display: flex;
    flex-direction: column;
  }
  .orderpic{
    height: 250px;
    position: relative;
  }
  .backbtn{
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top:25px;
    left:20px;
    font-size: 12px;
    background: rgba(0,0,0,.7);
    color:#fff
  }
  .carname{
    text-align: center;
    line-height: 40px;
  }
  .carLogo{
    text-align: center;
  }
  .carLogo >i {
    font-size: 20px;
    color:#666;
    line-height: 30px;
  }
  .info{
    margin-top: 15px;
    padding:0 20px
  }
  .infotitle{
    text-align: center;
    font-size: 12px;
    line-height: 2;
  }
  .infotitle:after{
    content: "";
    margin:0 auto;
    width: 30px;
    border-bottom:2px solid #ccc;
    display: block;
  }
  .arg{
    display: flex;
    height: 80px;
    margin-top: 15px;
  }
  .arg > div{
    width: 0;
    flex-grow: 1;
    text-align: center;
  }

  .argtitle{
    font-size: 12px;
    display: block;
    line-height: 2;
  }
  .arginfo{
    display: block;
    font-size: 18px;
  }
  .pricebox{
    padding:10px 40px
  }
  .priceitem{
    margin-bottom: 20px;
  }

  .l2{
    text-align: right;
    font-size: 12px;
    color:#999;
    text-decoration-line:line-through;

  }
  .l3{

    text-align: right;
    font-size: 12px;
    color:#666
  }

  .carinfo{
    padding:10px 40px;
    text-indent: 2em;
    font-size:12px;
    color:#666;
  }
  .checkout{
    height: 50px;
    background: -webkit-linear-gradient(top left,#6a78d0,#7986db);
    color:#fff;
    line-height: 50px;
    text-align: center;

  }
  .custom{
    text-align: center;
    line-height: 40px;
  }
  .getcar{
    padding:10px 40px;
    margin-bottom: 20px;

  }
  .cdate{
    margin:25px 0;
    position: relative;
    height: 35px;
  }
  .cdate>.rdate{

    height: 100px;
    width: 100px;
    border-radius: 50%;
    border:1px solid #6a78d0;
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    text-align: center;
  }

  .sdate{
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }

  .sdate>span{
    font-size: 12px;
    color:#666;
    text-align: left;
  }

  .maphd{
    height: 50px;
    border-bottom:1px solid #d6d6d6;
    position:relative;
  }
  .maphd .mbtn{
    position: absolute;
    width: 40px;
    height: 30px;
    border: 1px solid #000;
    right:5px;
    top:50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 30px;
    text-align: center;

  }
  .mipt{
    line-height: 50px;
    padding-left:10px
  }
  .mipt > input{
    width: 100%;
    height: 100%;
    outline:none;
    border:none;
    line-height: 50px;

  }
  .mapitem{
    padding:15px;
    line-height:15px;
    border-bottom:1px solid #e8e8e8
  }
  .mapitem > div:first-of-type{

  }
  .mapitem > div:last-of-type{
    line-height:15px;
    color:#666;
    font-size: 12px;
  }
  .map{
    position:absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .carlist{
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background: #fff;
    z-index: 99999;
  }
  .selected{
    width: 80%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin:20px auto;
    border:1px solid #3ca0e6;
    color:#3ca0e6
  }
  .carbox{
    width: 80%;
    height: 150px;
    text-align: center;
    margin:20px auto;
    border:1px solid #3ca0e6;
    color:#3ca0e6;
    background-size:cover!important;
    position:relative;

  }
  .carbox img{
    width: 100%;
  }
  .flightbox{
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .carmap{
    width: 200px;
    height: 80px;
    border:1px solid #ccc;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    background: url('../assets/nplace.jpg') no-repeat  center center;
  }
  .carmap > div{
    width: 50px;
    height: 20px;
    position: relative;
    border:1px solid transparent;
  }

  .carmap > div:after{
    content:'';
    margin: 0 auto;
    height: 20px;
    width: 20px;
    display: block;
    border-radius: 50%;
    border:1px solid #ccc
  }

  #siteD:after{
    content:'驾驶位';
    transform: scale(.75);
    display: block;
    font-size: 12px;
  }

  .ci:after{
    background: rgba(250,4,9,.7);
  }
  .carmap > div:last-child{
    position: relative;
    bottom:10px
  }
  .carmap > div:nth-last-child(2){
    position: relative;
    bottom:10px
  }

</style>
